<template>
  <div align="center">
    <h1>商品</h1>
    <table border="1" cellspacing="0">
      <tr>
        <td>名称</td>
        <td>图片</td>
        <td>价钱</td>
        <td>库存</td>
        <td>评论数</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in shop">
        <td>{{ i.name }}</td>
        <td><img :src="'http://127.0.0.1:8000'+i.pic" alt="" width="100px"></td>
        <td>{{ i.price }}</td>
        <td>{{ i.stock }}</td>
        <td>{{ i.comments }}</td>
        <td>
          <button @click="con(i.id)">评论</button>
        </td>
      </tr>
    </table>
    <button v-for="i in tpage" @click="get_shop(i)">{{ i }}</button>
  </div>
</template>

<script>
export default {
  name: "sshop",
  data() {
    return {
      shop: [],
      tpage: ''
    }
  },
  methods: {
    get_shop(i) {
      this.$axios.get('table/shop/?cpage=' + i)
        .then(res => {
          if (res.data.code == 200) {
            this.shop = res.data.list
            this.tpage = res.data.tpage
          }
        })
    },
    con(id) {
      let userid = localStorage.getItem('userid')
      if (userid) {
        this.$router.push({name: 'comm', query: {'id': id}})
      } else {
        alert('未登录')
        this.$router.push({name: 'sslogin'})
      }
    }
  },
  mounted() {
    this.get_shop(1)
  }
}
</script>

<style scoped>

</style>
